<template>
    <div class="invite">
	    <Header :show="true">邀请函</Header>
        <div class="banner">
         	<mt-swipe :auto="2000">
			    <mt-swipe-item><img src="../../assets/banner1.jpg"></mt-swipe-item>
			    <mt-swipe-item><img src="../../assets/banner2.jpg"></mt-swipe-item>
			    <mt-swipe-item><img src="../../assets/banner3.jpg"></mt-swipe-item>
			</mt-swipe>
        </div>
        <div class="content">
        	<div class="title">
	         	<p>{{ arrList.title }}</p>
	        </div>
	        <div class="timeSite">
		        <div class="item">
		         	<div class="tit">
		         		时间：
		         	</div>
		         	<div class="con">
		         		<span>{{ arrList.timeBegin | normalTime }}</span>
						<span>--</span>
						<span>{{ arrList.timeEnd | normalTime }}</span>
			         	</div>
		        </div>
		        <div class="item">
		         	<div class="tit">
		         		地点：
		         	</div>
		         	<div class="con">{{ arrList.detailSite }}</div>
		        </div>
		    </div>
		    <!-- 分割线 -->
		    <div class="partLine">
		    	<div class="dot-max"><div class="dot"></div></div>
		    </div>
		    <!-- 欢迎辞 -->
		    <div class="list">
		    	<h3>欢迎辞</h3>
		    	<div class="bar">
		    		<span></span>
		    		<span></span>
		    	</div>
		    	<div class="wel-text" v-html="arrList.welcome"></div>
		    </div>
		    <!-- 分割线 -->
		    <div class="partLine">
		    	<div class="dot-max"><div class="dot"></div></div>
		    </div>
		    <!-- 组织机构 -->
		    <div class="list">
		    	<h3>组织机构</h3>
		    	<div class="bar">
		    		<span></span>
		    		<span></span>
		    	</div>
		    	<ul>
		    		<li class="organ" v-for="item in arrList.organization">
				    	<div class="icon">
				    		<i class="fa fa-caret-right"></i>
				    		<i class="fa fa-caret-right"></i>
				    		<span>{{item.institution}}</span>
				    	</div>
			    		<ul class="text">
			    			<li v-for="item1 in item.list">
			    				<p>{{item1}}</p>
			    			</li>
			    		</ul>
			    	</li>
			    	<li class="organ" v-if="arrList.hostList">
				    	<div class="icon">
				    		<i class="fa fa-caret-right"></i>
				    		<i class="fa fa-caret-right"></i>
				    		<span>主办单位</span>
				    	</div>
			    		<ul class="text">
			    			<li v-for="item in arrList.hostList">
			    				<p>{{item}}</p>
			    			</li>
			    		</ul>
			    	</li>
			    	<li class="organ" v-if="arrList.agentList">
				    	<div class="icon">
				    		<i class="fa fa-caret-right"></i>
				    		<i class="fa fa-caret-right"></i>
				    		<span>承办单位</span>
				    	</div>
			    		<ul class="text">
			    			<li v-for="item in arrList.agentList">
			    				<p>{{item}}</p>
			    			</li>
			    		</ul>
			    	</li>
			    	<li class="organ" v-if="arrList.mediaList">
				    	<div class="icon">
				    		<i class="fa fa-caret-right"></i>
				    		<i class="fa fa-caret-right"></i>
				    		<span>合作媒体</span>
				    	</div>
			    		<ul class="text">
			    			<li v-for="item in arrList.mediaList">
			    				<p>{{item}}</p>
			    			</li>
			    		</ul>
			    	</li>
		    	</ul>
		    	
		    </div>
		    <!-- 分割线 -->
		    <div class="partLine">
		    	<div class="dot-max"><div class="dot"></div></div>
		    </div>
		    <div class="list">
		    	<h3>嘉宾介绍</h3>
		    	<div class="bar">
		    		<span></span>
		    		<span></span>
		    	</div>
		    	<ul class="guest">
		    		<!-- 循环嘉宾 -->
		    		<li v-for="item,index in arrList.guest">
		    			<div class="img">
		    				<img :src="item.img">
		    			</div>
		    			<div class="text">
		    				<p>{{item.name}}</p>
		    				<p>{{item.introduce}}</p>
		    			</div>
		    		</li>
		    	</ul>
		    </div>
		    <!-- 分割线 -->
		    <div class="partLine">
		    	<div class="dot-max"><div class="dot"></div></div>
		    </div>
		    <div class="list">
		    	<h3>活动日程</h3>
		    	<div class="bar">
		    		<span></span>
		    		<span></span>
		    	</div>
		    	<ul>
		    		<li class="journey organ" v-for="item in arrList.journey">
				    	<div class="icon">
				    		<i class="fa fa-caret-right"></i>
				    		<i class="fa fa-caret-right"></i>
				    		<span>{{item.date}}</span>
				    	</div>
			    		<ul class="jour-list">
			    			<li v-for="item1 in item.text">
			    				<div class="time">{{item1.time}}</div>
			    				<div class="text">{{item1.context}}</div>
			    			</li>
			    		</ul>
			    	</li>
		    	</ul>
		    </div>
		    <!-- 分割线 -->
		    <div class="partLine">
		    	<div class="dot-max"><div class="dot"></div></div>
		    </div>
		    <div class="apply">
		    	<div>
		    		<span>已报名</span>
	    			<div>
	    				<img src="../../assets/img1.jpg">
	    				<img src="../../assets/img2.jpg">
	    				<img src="../../assets/img3.jpg">
	    				<img src="../../assets/img4.jpg">
	    				<img src="../../assets/img5.jpg">
	    			</div>
		    	</div>
    			<p>约同行、约上游、约下游、约大咖</p>
    		</div>
    		<!-- 分割线 -->
		    <div class="partLine">
		    	<div class="dot-max"><div class="dot"></div></div>
		    </div>
		    <div class="others">
		    	<ul>
		    		<li><a href="#">发布高端活动</a></li>
		    		<li>|</li>
		    		<li><a href="#">业务合作</a></li>
		    		<li>|</li>
		    		<li><a href="#">招纳贤士</a></li>
		    	</ul>
		    </div>
		    <p class="copyRight">群英汇会议服务平台(北京泽财汇中科技有限公司)提供技术支持</p>
        </div>
	    <div class="footer">
	   	   <router-link to="/Conference" class="more">更多活动</router-link>
	   	   <router-link :to="{path:'/Apply/'+arrList2}" class="state">
	   	   		<span v-show="i<3">立即报名</span>
	   	   		<span v-show="i>2">已结束</span>
	   	   </router-link>
	    </div>
	    <div @click="backTop()" v-show="backTopShow" class="back-top">
	   		<img src="../../assets/top.png" alt="">
	   	</div>	
    </div>
</template>

<script>
import Header from '../base/Header'
	export default {
		data() {
			return {
				arrList:{},
				arrList2:'',
				i:0,
				backTopShow:false
			}
		},
        components:{
        	Header
        },
        mounted(){
        	var id = this.$route.params.id;
        	this.fetchData(id);
        	window.addEventListener('scroll',this.handleScroll);
        },
        methods: {
        	fetchData(id) {
        		let _this = this;
        		this.$http.get('static/data/invite.data')
        		.then(function(res){
        			_this.arrList = res.data[id].content;
        			_this.arrList2 = res.data[id].id;
        			_this.i = id;
        		}).catch(function(err){
        			console.log(err);
        		})
        	},
        	backTop () {
	     	   let back = setInterval(() => {
	     	   	    //获取当前页面滚动条纵坐标的位置
	     	   	    if(document.body.scrollTop||document.documentElement.scrollTop){
		     	   	 	document.body.scrollTop -=50;
		     	   	 	document.documentElement.scrollTop-=50;
		     	   	 }else {
		     	   	 	clearInterval(back)
		     	   	 }
		     	   })  		
		    },
		    handleScroll(){
		     	if(document.documentElement.scrollTop + document.body.scrollTop > 50) {
		     		this.backTopShow = true;
		     	} else {
		     		this.backTopShow = false;
		     	}
     		}
        }
	}
</script>

<style scoped lang="less">
	.invite{
		padding-top: 30px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
		font-size: 0.26rem;
		.banner{
			max-width: 100%;height: 4.2rem;
			img{width: 100%;height: 100%;}
		}
		.content{
			padding: 0 15px;
			margin-bottom: 60px;
			.title{
				padding: 13px 0;
				border-bottom: 1px solid #ff6100;
				p{
					font-size: 0.28rem;
					font-weight: bold;
					color: #555;
				}
			}
			/*时间地点*/
			.timeSite{
				.item{
					padding-top: 10px;
					overflow: hidden;
					.tit{float: left;width: 17%;display: inline-block;}
					.con{float: left;width: 83%;display: inline-block;}
				}
			}
			/*分割线*/
			.partLine{
				position: relative;
				border-top: 1px dashed #ff6100;
				margin: 10px 0;
				.dot-max{
					background: #fff;
					width: 30px;
					height: 7px;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					.dot{
						width: 7px;
						height: 7px;
						background: #ff6100;
						border-radius: 50%;
						margin:0 auto; 
					}
				}
			}
			.list{
				padding: 20px 0;
				h3{
					color: #ff6100;
					text-align: center;
					font-size: 0.28rem;
				}
				.wel-text{
					color: #666;
					text-indent: 2em;
					line-height: 0.46rem;
				}
				.bar{
					text-align: center;
					padding-bottom: 8px;
					span{display:inline-block;width: 30px;height: 4px;background: #999;}
					span:first-child{background: #ff6100;}
				}
				.organ{
					.icon{
						i:first-child{font-size: 0.6rem;color: #eda273;vertical-align: middle;}
						i:nth-child(2){
							font-size: 0.6rem;
							color: #ff6100;
							position: relative;
							left: -5px;
							vertical-align: middle;
						}
						span{font-weight: bold;font-size: 0.28rem;color: #555;vertical-align: middle;}
					}
					.text{margin:0.1rem 0.5rem;color: #666;}
				}
				.guest{
					li{
						margin-top: 0.1rem;
						.img{
							width:25%;display: inline-block;
							img{width: 1.2rem;height:1.2rem;border-radius: 6px;}
						}
						.text{
							width: 70%;height:100%;display: inline-block;vertical-align: top;
							p{line-height: 0.5rem;}
							p:first-child{font-weight: bold;}
							p:last-child{color: #666;}
						}
					}
				}
				.jour-list{
					margin-left: 0.55rem;
					li{
						overflow: hidden;
						margin: 0.2rem 0;
						.time{float: left;width: 40%;display: inline-block;line-height: 0.5rem;}
						.text{float: right;width: 60%;display: inline-block;vertical-align: top;margin: 0;line-height: 0.5rem;}
					}
				}
			}
			.apply{
				text-align: center;
				padding: 0.15rem 0;
				span{
					font-size: 0.3rem;
					margin-right: 0.2rem;
				}
				div{display: inline-block;overflow: hidden;vertical-align: middle;}
				img{width: 0.7rem;height: 0.7rem;float: left;margin-right: 3px;}
				p{margin-top: 0.12rem;}
			}
			.others{
				color: #ff6100;
				margin-bottom: 1rem;
				ul{
					overflow: hidden;
					li{
						float: left;text-align: center;
						a{color: #ff6100;}
					}
					li:first-child{width: 38%;}
					li:nth-child(3){width: 29%;}
					li:last-child{width: 29%;}
				}
			}
			.copyRight{font-size: 0.22rem;text-align: center;color: #888;padding-top: 0.2rem;}	
		}
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
			line-height: 50px;
			font-size: 0.3rem;
			.more{
				background: #fff;
				text-align: center;
				color: #222;
				display: inline-block;
				width: 35%;
				border-top: 1px solid #ccc;
				float: left;
			}
			.state{
				background: #ff6100;
				text-align: center;
				color: #fff;
				width: 65%;
				float: left;
			}
		}
		.back-top {
		    position: fixed;
		    right: 15px;
		    bottom:100px;
		    img{width: 0.8rem;height: 0.8rem;}
		} 
	}
</style>